/*
 * @Author: your name
 * @Date: 2021-03-17 15:06:36
 * @LastEditTime: 2021-03-17 17:15:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinedd:\dao_ju_cheng\gulpfile.js
 */
const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    sass = require('gulp-sass'),
    mincss = require('gulp-clean-css'),
    del = require('del'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect');

// 定义一个对象把所有路径管理起来
const path = {
    htmlPath:{
        src: './src/**/*.html', // 当前src文件夹
        dest: './dist'
    },
    cssPath:{
        src: './src/scss/*.scss',
        dest: './dist/css'
    },
    jsPath:{
        src: './src/js/*.js',
        dest: './dist/js'
    },
    libPath:{
        src: './src/lib/**/*.*',
        dest: './dist/lib'
    },
    imgPath:{
        src: './src/images/*.*',
        dest: './dist/images'
    }
}

// 定制一个任务 删除dist
const delDist = () => {
    return del('./dist')
}

// 将所有路径解构
const {htmlPath, cssPath, jsPath, libPath, imgPath} = path;

// 定制任务
const html = () => {
    return gulp.src(htmlPath.src)
      .pipe(htmlmin({
        removeComments: true, // 清除HTML注释
        collapseWhitespace: true, // 压缩HTML
        collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: false, // 删除<style>和<link>的type="text/css"
        minifyJS: true, // 压缩页面JS
        minifyCSS: true // 压缩页面CSS 
      }))
      .pipe(gulp.dest(htmlPath.dest))
      .pipe(connect.reload())  // 任务执行以后再次刷新页面
  }

  // 定制 css 任务
  // 1.将sass 转为 css
  // 2. 将css 压缩
  const css = () => {
      return gulp.src(cssPath.src)
      .pipe(sass())
      .pipe(mincss())
      .pipe(gulp.dest(cssPath.dest))
  }

  // 定制 js 任务
  // 1. ES6 转为 ES5
  // 2. 压缩 js 代码
   const js = () =>{
       return gulp.src(jsPath.src)
       .pipe(babel({
           presets: ['@babel/env']
       }))
       .pipe(uglify())
       .pipe(gulp.dest(jsPath.dest))
   }

   // 复制 lib 和 img 文件夹
   const libs = () =>{
       return gulp.src(libPath.src)
       .pipe(gulp.dest(libPath.dest))
   }
   const imgs = () =>{
       return gulp.src(imgPath.src)
       .pipe(gulp.dest(imgPath.dest))
   }

   // 定制一个服务器任务
   const server = () => {
       connect.server({
           livereload: true,
           root: 'dist', // 你要运行的根目录
           port : 5500
       })
   }

    // 定制一个监视任务 监视你的文件有没有发生改变
    const watch = () => {
        // 如果src 里面的任何一个html发生改变，那就再次执行html任务
        gulp.watch(htmlPath.src, html);
        // 同上
        gulp.watch(cssPath.src, css);
        // 同上
        gulp.watch(jsPath.src, js);
    }

    // series 按照同步顺序执行
    // parallel 按照异步顺序执行
    module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, libs, imgs, server, watch))